<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
raytest
</title>
</head>
<body onload="draw();">
<script type="text/javascript" language="javascript" src="ray.js" ></script>
<script type="text/javascript" language="javascript">
var ctx;

var alfa = Math.PI / 6 + Math.PI / 12;
var P = new Vector(100,100);
var P1 = new Vector(100, 150);
var D1 = new Vector(100, -100);
var D = new Vector(Math.sin(alfa), Math.cos(alfa));
var ray = new Ray(P, D);
var cir = new Circle(new Vector(200,200),20);
var seg = new Ray(P1, D1);

function draw()
{
    //var dist = ray.intersectCircle(cir);
    var dist = ray.intersectSegment(seg);
    ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
    ctx.save();
    //draw a circle
    ctx.fillStyle = "red";
    ctx.beginPath();
        ctx.arc(cir.c.x, cir.c.y, cir.r, 0, Math.PI*2, true);
        ctx.closePath();
    ctx.fill();
    
    ctx.beginPath();
        ctx.moveTo(seg.P.x, seg.P.y);
        ctx.lineTo(seg.P.x + seg.D.x, seg.P.y + seg.D.y);
    ctx.stroke();
    
    //ctx.strokeStyle = 'hsl('+red+',80%,60%)';
    ctx.beginPath();
        ctx.moveTo(ray.P.x,ray.P.y);
        if (dist > 0)
            ctx.lineTo(ray.P.x+dist*ray.cos, ray.P.y + dist*ray.sin);
        else
            ctx.lineTo(5000*ray.cos, 5000*ray.sin);
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
    //alert(dist);
}

</script>
<canvas width="500" height="500" >canvas is not suported</canvas>
</body>
</html>